<template>
    <div class="app-container">
        <!-- 操作栏 -->
        <div class="mb-4">
            <el-button type="primary" @click="handleCreate">新增提示词</el-button>
            <el-input v-model="searchKeyword" placeholder="搜索提示词..." style="width: 300px; margin-left: 20px" clearable
                @input="handleSearch" />
        </div>

        <!-- 数据表格 -->
        <el-table :data="filteredPrompts" border style="width: 100%">
            <el-table-column prop="id" label="ID" width="80" />
            <el-table-column prop="title" label="标题" width="180" />
            <el-table-column prop="content" label="内容" />
            <el-table-column prop="tags" label="标签" width="150">
                <template #default="{ row }">
                    <el-tag v-for="tag in row.tags" :key="tag" style="margin-right: 5px">
                        {{ tag }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="createdAt" label="创建时间" width="180" />
            <el-table-column label="操作" width="180">
                <template #default="{ row }">
                    <el-button size="small" @click="handleEdit(row)">编辑</el-button>
                    <el-button size="small" type="danger" @click="handleDelete(row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 编辑对话框 -->
        <el-dialog v-model="dialogVisible" :title="isEdit ? '编辑提示词' : '新增提示词'" width="40%">
            <el-form :model="form" :rules="rules" ref="formRef">
                <el-form-item label="标题" prop="title">
                    <el-input v-model="form.title" />
                </el-form-item>
                <el-form-item label="内容" prop="content">
                    <el-input v-model="form.content" type="textarea" :rows="4" />
                </el-form-item>
                <el-form-item label="标签">
                    <el-select v-model="form.tags" multiple filterable allow-create placeholder="请选择或输入标签"
                        style="width: 100%" />
                </el-form-item>
            </el-form>

            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="submitForm"> 确认 </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 示例初始数据
const initialData = [
    {
        id: 1,
        title: '欢迎语',
        content: '欢迎来到我们的平台！请问有什么可以帮助您的？',
        tags: ['通用', '欢迎'],
        createdAt: '2023-07-20 10:00'
    },
    {
        id: 2,
        title: '错误提示',
        content: '抱歉，系统繁忙，请稍后再试。',
        tags: ['错误', '系统'],
        createdAt: '2023-07-20 11:30'
    }
]

const searchKeyword = ref('')
const dialogVisible = ref(false)
const isEdit = ref(false)
const form = ref({
    id: null,
    title: '',
    content: '',
    tags: [],
    createdAt: ''
})
const prompts = ref([...initialData])
const formRef = ref(null)

// 验证规则
const rules = {
    title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
    content: [{ required: true, message: '请输入内容', trigger: 'blur' }]
}

// 过滤后的数据
const filteredPrompts = computed(() => {
    return prompts.value.filter(
        (item) =>
            item.title.includes(searchKeyword.value) ||
            item.content.includes(searchKeyword.value) ||
            item.tags.some((tag) => tag.includes(searchKeyword.value))
    )
})

// 搜索处理
const handleSearch = () => {
    // 过滤逻辑由计算属性自动处理
}

// 打开创建对话框
const handleCreate = () => {
    isEdit.value = false
    form.value = {
        id: null,
        title: '',
        content: '',
        tags: [],
        createdAt: ''
    }
    dialogVisible.value = true
}

// 打开编辑对话框
const handleEdit = (row) => {
    isEdit.value = true
    form.value = { ...row }
    dialogVisible.value = true
}

// 提交表单
const submitForm = async () => {
    await formRef.value.validate((valid) => {
        if (valid) {
            if (isEdit.value) {
                // 更新逻辑
                const index = prompts.value.findIndex((item) => item.id === form.value.id)
                prompts.value.splice(index, 1, {
                    ...form.value,
                    updatedAt: new Date().toISOString()
                })
            } else {
                // 新增逻辑
                prompts.value.push({
                    ...form.value,
                    id: Date.now(),
                    createdAt: new Date().toISOString()
                })
            }
            dialogVisible.value = false
            ElMessage.success(isEdit.value ? '更新成功' : '创建成功')
        }
    })
}

// 删除处理
const handleDelete = (row) => {
    ElMessageBox.confirm('确认删除该提示词？', '警告', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        prompts.value = prompts.value.filter((item) => item.id !== row.id)
        ElMessage.success('删除成功')
    })
}
</script>

<style scoped>
.app-container {
    padding: 20px;
}

.mb-4 {
    margin-bottom: 1rem;
}
</style>